<template>
  <el-dialog
    title="每月流量趋势"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <div class="tableLine">
      <div id="flowMonth"></div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
// import * as echarts from "../../demo/echarts";
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
        date: ""
      },
      chartLine: "", // echarts实例
      dataList: [], // 放置图表数据的数组
      dataListLoading: false,
      stationName: ""
    };
  },
  methods: {
    init(date, id) {
      this.dataForm.date = date;
      this.dataForm.id = id;
      this.visible = true;
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornUrl("/cms/tbFlowMeter/trend"), // 接口路径
          method: "get", // 请求方式
          param: this.$http.adornParams({
            date: this.dataForm.date,
            id: this.dataForm.id
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.dataList = data.vo.list;
            this.stationName = data.vo.flowMeterName;
            if (this.chartLine) {
              // 如果图表已经存在
              this.chartLine.resize(); // 监听图表容器的大小并改变图表大小
            }
            this.initChartLine();
          } else {
            // 如果无数据返回(?)
            this.dataList = [];
            this.stationName = data.vo.flowMeterName;
            if (this.chartLine) {
              // 如果图表已经存在
              this.chartLine.resize(); // 监听图表容器的大小并改变图表大小
            }
            this.initChartLine();
          }
        });
      });
    },
    initChartLine() {
      let WholeDayTime = [];
      let WholeDayValue = [];
      if (this.dataList.length > 0) {
        this.dataList.forEach(item => {
          WholeDayTime.push(item.date);
          WholeDayValue.push(item.flowSum);
        });
      }
      // 图表option
      var option = {};
      this.chartLine = echarts.init(document.getElementById("flowMonth"));
      this.chartLine.setOption();
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus"></style>
